<app-sub-window [title]="'SETTINGS.TITLE' | translate" [winBtns]="['close']">
  <div class="window-inner">
    <div class="window-content">
      <div class="left">
        <div class="left-inner">
          @for (item of items; track item.name) {
          <div class="type-btn btn" (click)="scrollToSection(item)"
            [ngClass]="{ selected: activeSection === item.name }">
            <div class="icon ccenter"><i class="{{ item.icon }}"></i></div>
            {{ item.name | translate}}
          </div>
          }
        </div>
      </div>
      <ngx-simplebar class="right" #scrollContainer [options]="options" (scroll)="onScroll()">
        <div class="right-inner-container">
          <!-- 基础设置 -->
          <div id="SETTINGS.SECTIONS.BASIC" class="section" style="padding-bottom: 100px;">
            <h2 class="section-title">{{ 'SETTINGS.SECTIONS.BASIC' | translate }}</h2>
            <div class="right-inner">
              <div class="item">
                <div>{{ 'SETTINGS.FIELDS.PROJECT_FOLDER' | translate }}:</div>
                <input nz-input [(ngModel)]="configData.project_path" [disabled]="true" />
              </div>
              <div class="item">
                <div>{{ 'SETTINGS.FIELDS.LANGUAGE' | translate }}:</div>
                <div class="langs">
                  @for(lang of langList; track lang) {
                  <div class="lang ccenter" [ngClass]="{ selected: currentLang==lang.code }" (click)="selectLang(lang)">
                    <img src="i18n/{{ lang.code }}/{{ lang.code }}.jpg" alt="" srcset="" />
                    <span>{{ lang.name }}</span>
                  </div>
                  }
                </div>
              </div>
            </div>
          </div>

          <!-- 主题设置 -->
          <div id="SETTINGS.SECTIONS.THEME" class="section">
            <h2 class="section-title">{{ 'SETTINGS.SECTIONS.THEME' | translate }} <span>部分效果需重新打开项目生效</span></h2>
            <div class="right-inner">
              <div class="item">
                <div>{{ 'SETTINGS.FIELDS.UI_THEME' | translate }}:</div>
                <!-- <div class="item-inner"> -->
                <nz-radio-group [(ngModel)]="configData.theme" [nzSize]="'small'" nzButtonStyle="solid">
                  <label nz-radio-button nzValue="default">Dark</label>
                  <label nz-radio-button nzValue="light" [nzDisabled]="true">Light</label>
                </nz-radio-group>
                <!-- </div> -->
              </div>
              <div class="item">
                <div>{{ 'SETTINGS.FIELDS.BLOCKLY_THEME' | translate }}:</div>
                <!-- <div class="item-inner"> -->
                <nz-radio-group [(ngModel)]="configData.blockly.renderer" [nzSize]="'small'" nzButtonStyle="solid">
                  <label nz-radio-button nzValue="thrasos">Thrasos</label>
                  <label nz-radio-button nzValue="zelos">Zelos</label>
                </nz-radio-group>
                <!-- </div> -->
              </div>
            </div>
          </div>
          <!-- 编译设置 -->
          <div id="SETTINGS.SECTIONS.COMPILATION" class="section">
            <h2 class="section-title">{{ 'SETTINGS.SECTIONS.COMPILATION' | translate }}</h2>
            <div class="right-inner">
              <div class="item">
                <div>{{ 'SETTINGS.FIELDS.COMPILATION_OPTIONS' | translate }}:</div>
                <div class="item-inner">
                  <div class="w50 ccenter">
                    多核编译
                    <nz-switch [ngModel]="true"></nz-switch>
                  </div>
                  <div class="w50 ccenter">
                    显示详情
                    <nz-switch [ngModel]="true"></nz-switch>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 仓库设置 -->
          <div id="SETTINGS.SECTIONS.REPOSITORY" class="section">
            <h2 class="section-title">{{ 'SETTINGS.SECTIONS.REPOSITORY' | translate }}</h2>
            <div class="right-inner">
              <div class="item">
                <div>{{ 'SETTINGS.FIELDS.REPOSITORY_URLS' | translate }}:</div>
                <input nz-input [(ngModel)]="configData.npm_registry[0]" [disabled]="true" />
              </div>
              <!-- <div class="instructions">{{ 'SETTINGS.FIELDS.REPOSITORY_URLS' | translate }}</div>
              <textarea class="registry" nz-input [(ngModel)]="npmRegistryListStr"></textarea>
              <div class="instructions">{{ 'SETTINGS.FIELDS.BOARD_LIST' | translate }}</div>
              <textarea class="registry" nz-input [(ngModel)]="npmRegistryListStr"></textarea>
              <div class="instructions">{{ 'SETTINGS.FIELDS.LIBRARY_LIST' | translate }}</div>
              <textarea class="registry" nz-input [(ngModel)]="npmRegistryListStr"></textarea> -->
            </div>
          </div>

          <!-- 开发板管理 -->
          <div id="SETTINGS.SECTIONS.DEPENDENCIES" class="section">
            <h2 class="section-title">{{ 'SETTINGS.SECTIONS.DEPENDENCIES' | translate }}</h2>
            <div class="right-inner">
              <!-- <div class="serach-box">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                  <input type="text" nz-input placeholder="{{ 'SETTINGS.FIELDS.SEARCH_BOARD' | translate }}" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                  <i class="fa-regular fa-magnifying-glass"></i>
                </ng-template>
              </div> -->
              <div class="board-list sscroll bborder">
                @if(boardList.length == 0) {
                <div class="board-item">Loading</div>
                }@else{
                @for (board of boardList; track $index) {
                <div class="board-item">
                  <div>{{ board.name }}</div>
                  <div class="version">&#64;{{ board.version }}</div>
                  <div class="btns">
                    @if (board.installed) {
                    <div class="btn link" (click)="uninstall(board)">{{ 'SETTINGS.FIELDS.UNINSTALL' | translate }}</div>
                    } @else {
                    <div class="btn link" (click)="install(board)">{{ 'SETTINGS.FIELDS.INSTALL' | translate }}</div>
                    }
                  </div>
                </div>
                }
                }

              </div>
            </div>
          </div>
          <div id="SETTINGS.SECTIONS.MCP" class="section">
            <h2 class="section-title">MCP</h2>
            <div class="right-inner">
              <div class="board-list sscroll bborder">
                @if(mcpServiceList.length == 0) {
                <div class="board-item">Coming soon</div>
                }@else{
                @for (mcpService of mcpServiceList; track $index) {
                <div class="board-item">
                  <div>{{ mcpService.name }}</div>
                  <div class="version">&#64;{{ mcpService.version }}</div>
                  <div class="btns">
                  </div>
                </div>
                }
                }

              </div>
            </div>
          </div>
          <!-- 开发者设置 -->
          <div id="SETTINGS.SECTIONS.DEVMODE" class="section">
            <h2 class="section-title">{{ 'SETTINGS.SECTIONS.DEVMODE' | translate }}</h2>
            <div class="right-inner">
              <div class="item">
                <div>{{ 'SETTINGS.SECTIONS.DEVMODE' | translate }}:</div>
                <nz-switch [(ngModel)]="configData.devmode" (ngModelChange)="onDevModeChange()"></nz-switch>
              </div>
            </div>
          </div>
        </div>
      </ngx-simplebar>
    </div>
    <div class="window-footer">
      <div class="btns">
        <button nz-button nzType="default" (click)="cancel()">{{ 'SETTINGS.BUTTONS.CANCEL' | translate }}</button>
        <button nz-button nzType="primary" (click)="apply()">{{ 'SETTINGS.BUTTONS.APPLY' | translate }}</button>
      </div>
    </div>
  </div>
</app-sub-window>